import React, { PureComponent, Fragment } from 'react';
import { connect } from 'react-redux';
import { Switch, Route, withRouter } from 'react-router';
import { Redirect } from 'react-router-dom';
import Loadable from 'react-loadable';

import Loading from '../components/common/lazyLoading';
import { getQueryParam } from '../utils/url';
import withNav from '../components/nav/nav.chongqing';
import VipModal from '../components/vip/vipModal.qiji';


export const basePath = '/qiji';

export const routes = [
  {
    path: '/agreement',
    needLogin: false,
    component: Loadable({
      loader: () => import('../pages/app/agreement'),
      loading: Loading,
    }),
  },
  {
    path: '/vipCard',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/card/card.vip.qiji'),
      loading: Loading,
    }),
  },
  {
    path: '/login',
    needLogin: false,
    component: Loadable({
      loader: () => import('../pages/user/login.cq'),
      loading: Loading,
    }),
  },
  {
    path: '/home',
    needLogin: true,
    component: withNav(
      Loadable({
        loader: () => import('../pages/home/home.qiji'),
        loading: Loading,
      }),
      0,
    ),
  },
  {
    path: '/refuel',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/code/payCode.refuel.qiji'),
      loading: Loading,
    }),
  },
  {
    path: '/giftCenter',
    needLogin: true,
    component: withNav(
      Loadable({
        loader: () => import('../pages/user/giftCenter.qiji'),
        loading: Loading,
      }),
      1,
    ),
  },
  {
    path: '/userCenter',
    needLogin: true,
    component: withNav(
      Loadable({
        loader: () => import('../pages/user/userCenter.qiji'),
        loading: Loading,
      }),
      2,
    ),
  },
  {
    path: '/result',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/result/result.qiji'),
      loading: Loading,
    }),
  },
  {
    path: '*',
    component: Loadable({
      loader: () => import('../pages/app/404'),
      loading: Loading,
    }),
  },
];

@withRouter
@connect(({ user, vip }) => {
  return {
    user: user.get('user'),
    modal: vip.get('modal'),
  };
})
class QijiRoutes extends PureComponent {
  state = {
    showNav: true,
  }
  componentDidMount() {
    window.source = 'GXBBW';
    this.requestData();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.user !== this.props.user && nextProps.user.get('token')) {
      setTimeout(() => {
        this.requestData();
      }, 300);
    }
  }

  requestData = () => {
    const { user } = this.props;
    if (user.get('token')) {
      this.props.dispatch({
        type: 'vip/fetchVipModal',
      });
    }
  }

  closeVipModal = () => {
    this.props.dispatch({
      type: 'vip/closeVipModal',
    });
  }

  goRefuel = () => {
    this.closeVipModal();
    this.props.history.push('refuel');
  }

  render() {
    const { showNav } = this.state;
    const {
      user,
      modal,
    } = this.props;
    const cells = routes.map((route) => {
      const {
        path,
        component: AppComponent,
        needLogin,
        ...rest
      } = route;
      const relPath = `${basePath}${path}`;
      return (
        <Route
          key={relPath}
          path={relPath}
          {...rest}
          render={(props) => { // eslint-disable-line
            if (needLogin && !user.get('token') && !getQueryParam('yyeCode') && path !== '/login') {
              const redirect = {
                pathname: `${basePath}/login`,
                search: `?callbackUrl=${basePath}${path}`,
              };
              return <Redirect to={redirect} />;
            } else {
              return <AppComponent showNav={showNav} {...props} canRefuel />;
            }
          }}
        />
      );
    });
    return (
      <Fragment>
        <Switch>
          {cells}
        </Switch>
        <VipModal ref={vipModal => this.vipModal = vipModal} show={modal.get('show')} vip={modal.get('vip')} closeFunc={this.closeVipModal} refuelFunc={this.goRefuel} />
      </Fragment>

    );
  }
}

export default QijiRoutes;

